<template>
  <div>

    <ul>
      <li v-for="item in mList" :key="item.id">
        <!--     <router-link :to="{path:'/home/message/info',query:{id:item.id,title:item.title}}">{{item.title}}</router-link>-->
        <router-link replace :to="{name:'info',params:{id:item.id,title:item.title}}">{{ item.title }}</router-link>
        <button @click="pushShow(item)">push</button>
        <button @click="replaceShow(item)">replace</button>
      </li>
    </ul>

    <router-view></router-view>
  </div>

</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      mList: [{
        id: '001',
        title: 't1'
      }, {
        id: '002',
        title: 't2'
      }, {
        id: '003',
        title: 't3'
      }
      ]
    }
  },
  methods: {
    pushShow(item) {
      this.$router.push({name: 'info', params: {id: item.id, title: item.title}})
    },
    replaceShow(item) {
      this.$router.replace({
        name: 'info',
        params: {
          id: item.id, title: item.title
        },
      })
    },
  },
  beforeDestroy() {
    console.log('Message,beforeDestroy')
  }
}
</script>

<style scoped>

</style>
